<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>      
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="/resource/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="/resource/js/jquery-3.2.1/jquery.js"></script>
<script type="text/javascript" src="/resource/js/jquery.validate.js"></script>
<script type="text/javascript" src="/resource/js/jqueryvalidate/localization/messages_zh.js"></script>
<script type="text/javascript" src="/resource/bootstrap-4.3.1/js/bootstrap.js"></script>

</head>
<body>
	<div class="container">
		<div class="row">
			<!-- 文章的具体内容 -->
			<br>
			<div class="col-md-8">
				<br>
				<h2>${article.title}</h2>
				<br>
				<br>
				<br>
				<p>
					${article.content}
				</p>
				
				<br>
				<div>
					<textarea rows="5" cols="60" id="commentContent">
					</textarea>
					<input type="button" value="评论" onclick="addComment()">
				</div>
				<br>
				<!-- 评论的列表 -->
				<div id="commentListdiv">
						
				</div>
			</div>
			<!-- 相关文章 -->
			<div class="col-md-4" style="margin-top:50px">
			 	<div class="card text-center" >
				  <div class="card-header">
				    	相关文章
				  </div>
				  <div class="card-body">
				    
				    <p class="card-text">
						<ol>
							<li>文章1</li>
							<li>文章2</li>
							<li>文章3</li>
							<li>文章4</li>
						</ol>
					</p>
				  </div>
				  <div class="card-footer text-muted">
				    2 days ago
				  </div>
				</div>
				
			</div>
			
		</div>
	</div>
	<script type="text/javascript">
	
		function addComment(){
			//alert('dd')
			var cont=$("#commentContent").val();
			alert(cont)
			$.post("/article/addComment",{id:'${article.id}',content:cont},
				function(data){
					if("success"==data){
						//评论发布成功以后 需要刷新一下评论的列表
						showComment(1);
					}else{
						alert(data)
					}
				})
		}
	
		
		//显示某一页的评论
		function showComment(page){
			$("#commentListdiv").load("/article/listComment?id=${article.id}&page="+page)
		}
		//页面加载完成后立即显示第一页的评论
		showComment(1);
		
	</script>

</body>
</html>